<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="referrer" content="no-referrer" />
	<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
	<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
	<title>详情</title>
	<style type="text/css">
		.sb{border: 1px solid #000; height: 300px;width: 800px;margin: 0 auto}
		.print-btn{ margin-bottom:30px }
		@media print {
			.print-btn {display: none;}
		}
		.head{ border: 1px solid #000; padding: 15px; width: 800px; margin: 0 auto;}
		.head .title{text-align: center;font-size: 30px;font-weight: bold;}
		.head-body{ display: flex;}
		.head-body .text{font-size:18px; padding: 15px 5px;}
		.head-body .photo{padding: 0px 25px;}

		.detail{ border: 1px solid #000; padding: 15px; width: 800px; margin: 0 auto;margin-top: 30px;}
	    .detail .th, .detail .tr{display: flex;text-align: center;border-left: 1px solid #000;border-top: 1px solid #000;}
	    .detail .th div, .detail .tr div{padding: 14px 8px;border-right: 1px solid #000;}
	    .detail .th{ -webkit-print-color-adjust: exact;background-color: #909399 !important; }

	    .detail .img-list{border-top: 1px solid #000;padding: 15px 0; flex-wrap: wrap;}
	      .detail .img-list .title{font-size: 18px;padding: 10px;}
	      .detail .img-list .images{display: flex;flex-wrap: wrap;}
	        .detail .img-list .images .item{ width: 180px; text-align: center;padding: 5px 10px;}
	          .detail .img-list .images .item .time{ font-size: 10px;}
		  .line1{width: 220px;}
		  .line2{width: 180px;}
		  .line3{width: 110px;}
		  .line4{width: 120px;}
		  .line5{width: 140px;}
	</style>
</head>
<body>

	<input value='打印' class="print-btn" type='button' onclick='handlePrint()' />
      

   <div class="head">
     <div class="title">{$companyTitle} - {$realname}的学习进度报告</div>
     <div class="head-body">
       <div class="text">{$realname} ，于{$s_time}至{$e_time}参加{$title}的培训，培训内容和完成学时如下：</div>
       <div class="photo">
         <img src="{$photo}" width="50px"  />
       </div>
     </div>
   </div>

   <div class="detail">
        <div class="th">
          <div class="line1">姓名</div>
          <div class="line2">身份证号</div>
          <div class="line3">车牌号</div>
          <div class="line4">手机号</div>
          <div class="line5">计划名称</div>
        </div>
        <div class="tr">
          <div class="line1">{$realname}</div>
          <div class="line2">{$id_card}</div>
          <div class="line3">{$vehicle_plate_number}</div>
          <div class="line4">{$tel}</div>
          <div class="line5">{$title}</div>
        </div>

        <div class="th">
          <div class="line1">课件内容</div>
          <div class="line2">开始时间</div>
          <div class="line3">课件时长</div>
          <div class="line4">完成率</div>
          <div class="line5">是否完成</div>
        </div>
        {volist name="videoList" id="item" }
        <div class="tr">
          <div class="line1">{$item.title}</div>
          <div class="line2">{$s_time}</div>
          <div class="line3">{$item.Duration}</div>
          <div class="line4" @click="setTrainDone(item)">{$item.Percent}%</div>
          <div class="line5">{$item.isDone}</div>
        </div>
        {/volist}
        
        <div class="img-list">
          <div class="title">学习过程照片:</div>
          <div class="images">
          	{volist name="photoList" id="item" }
            <div class="item">
              <img src="{$item.photo}" width="60px" />
              <div class="time">{$item.createTime}</div>
            </div>
            {/volist}
          </div>
        </div>
        
        
        <div class="img-list">
          <div class="title">学习签字:</div>
          <div class="images">
          	{volist name="signList" id="item" }
            <div class="item">
              <img src="{$item.photo}" width="60px" />
              <div class="time">{$item.createTime}</div>
            </div>
            {/volist}
          </div>
        </div>
        

      </div>
</body>
</html>

<script type="text/javascript">
   const handlePrint = () => {
      parent.iframename.focus();
      window.print();
   }
</script>